import React, { Suspense, lazy } from 'react';
import ReactDOM from 'react-dom';
import { HashRouter, Route, Switch, Redirect, BrowserRouter } from 'react-router-dom';
import { Provider } from 'react-redux'
import './index.css';
import Home from './Home.jsx';
import App from './pages/App/App.jsx';
import Test from './pages/Test/Test.jsx';
import * as serviceWorker from './serviceWorker';
import store from './store'

const Todo = lazy(() => import('./pages/Todo/Todo.jsx'))

ReactDOM.render(
  <Provider store={store}>
    <BrowserRouter>
      <Suspense fallback={<div>Loading...</div>}>
        <Switch>
          <Redirect exact from='/' to='/home'></Redirect>
          <Redirect exact from='/home' to='/home/app'></Redirect>
          <Home path='/home'>
            <Route exact path="/home/app" component={App}></Route>
            <Route exact path="/home/todo/:id?" component={Todo}></Route>
            <Route exact path="/home/test" component={Test}></Route>
          </Home>
        </Switch>
      </Suspense>
    </BrowserRouter>
  </Provider>,
  document.getElementById('root')
);

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister();
